<template>
    <div class="home">
        <el-card class="box-card" style="width: 400px">
            <div slot="header" class="clearfix">
                <span>个人中心</span>
            </div>
            <div style="display: flex;justify-content: center">
                <img title="点击修改用户头像" :src="url" style="height:100px;width: 100px;border-radivs:50px" alt="">
            </div>
            <div>电话号码:<el-tag >{{userinfo.tel}}</el-tag></div>
            <div>手机号码:<el-tag >{{userinfo.phone}}</el-tag></div>
            <div>居住地址:<el-tag >{{userinfo.address}}</el-tag></div>
            <div>用户标签:<el-tag typ="success" v-for="(r,index) in userinfo.label":key="index"></el-tag>{{userinfo.label}}</div>
            <div style="display: flex;justify-content: space-around;margin-top: 5px">
                <el-button type="primary" @click="showUpdateAdminInfdView">基础信息修改</el-button>
                <el-button type="danger" @click="showUpdatePasswordVie">修改密码</el-button>
            </div>
        </el-card>
        <el-dialog
                title="编辑用户信息"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <table>
                    <tr>
                        <td>电话号码</td>
                        <td><el-input v-model="userinfo.tel" placeholder="placeholder"></el-input></td>
                    </tr>
                    <tr>
                        <td>手机号码</td>
                        <td><el-input v-model="userinfo.phone" placeholder="placeholder"></el-input></td>
                    </tr>
                    <tr>
                        <td>用户地址</td>
                        <td><el-input v-model="userinfo.address" placeholder="placeholder"></el-input></td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updeteAdminInfo">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
                title="更新密码"
                :visible.sync="passwordDialogVisible"
                width="30%">
            <div>
                <el-form :model="ruleForm" status-icon  ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="请输入旧密码" prop="oldPass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>

    </div>
</template>

<script>

    export default {
        name: 'AdminInfo',
        data() {
            return {
                userinfo2: null,
                dialogVisible: false,
                passwordDialogVisible: false,
                url: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                userinfo: {
                    tel: '123456',
                    phone: '11111111',
                    address: 'skdnak',
                    label: ['java', 'html'],
                },
                rules: {
                    pass: [
                        { required: true, message: '密码不能为空', trigger: 'change' }
                    ],
                    checkPass: [
                        { required: true, message: '密码不能为空', trigger: 'change' }
                    ],
                    oldPass: [
                        { required: true, message: '密码不能为空', trigger: 'change' }
                    ]
                },
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    oldPass: ''
                },

            };
                },
        mounted(){
           // this.initAdmin();
        },
        created() {
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm .ur1 = this.ur1.id;
                       this.putRequest('/admin/pass',this.ruleForm).then(resp=>{
                           if (resp){
                               //更新密码成功后退出登录
                               this.postRequest('/logout');
                               Window.sessionStorage.removeItem('user')
                               Window.sessionStorage.removeItem('tokenStr')
                               this.$store.commit('initRoutes',[]);
                               this.$router.replace ('/');
                           }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            updeteAdminInfo(){

               this.putRequest('/user/info',this.userinfo2).then(resp => {
                    if(resp) {
                        this.dialogVisible = false;
                        this.initAdmin ();
                    }
                })
                //后端接口
            },
            showUpdateAdminInfdView(){
                this.dialogVisible = true;
            },
            showUpdatePasswordVie(){
                this.passwordDialogVisible = true;
            },

            initAdmin(){
                this.getRequest('/userinfo/infor').then(resp=>{
                    if (resp) {
                        this.userinfo = resp;
                        this.userinfo = Object.assign({},this.userinfo);
                    }
                })
            },
            saveUserInfo(){

            }
        }
    }
</script>